<!-- 扬尘检测地图 -->
<template>
	<div class="mapBox">
		<div class="Dust" v-if="pageType == 2">
			<div class="item flex align-items-center">
				<img src="@/assets/images/offLine.png" alt="">
				<p>智慧扬尘</p>
				<span>{{deviceNum}}</span>
			</div>
			<div class="item flex align-items-center">
				<img src="@/assets/images/onLine.png" alt="">
				<p>环保扬尘</p>
				<span>{{siteNum}}</span>
			</div>
		</div>
		<div class="Jeeves flex" v-if="pageType == 1">
			<div class="item flex align-items-center">
				<img src="@/assets/images/onLine.png" alt="">
				<p>在线</p>
			</div>
			<div class="item flex align-items-center">
				<img src="@/assets/images/offLine.png" alt="">
				<p>离线</p>
			</div>
		</div>
		<!-- <snap v-if="isMonitorSnap"></snap> -->
	</div>

</template>
<script>
	import AMap from "AMap";
	import {
		getViDeviceList,
		getSiteLonLatList,
		getAirmonitorId
	} from '@/api/index'
	import EZUIKit from 'ezuikit-js'; //萤石云
	// import snap from './components/Snap.vue'
	export default {
		props: {
			pageType: {
				type: Number,
				default: 1
			}, //页面类型
			zIndex: {
				type: Number,
				default: 12
			}, //地图层级
			center: {
				type: Array,
				default: () => {
					return [112.555441, 37.69565]
				}
			}, //地图中心点
			PointType: {
				type: Number,
				default: 1
			}, //监控点位
		},
		data() {
			return {
				map: null,
				markers: [],
				infoWindow: null,
				// type: 1,
				isEnlarge: 0, //是否放大
				jynPlayer0: null,
				jynPlayer1: null,
				monitorData: {}, //监控数据
				isMonitorSnap: false, //监控弹窗
				deviceNum: 0,
				siteNum: 0,
				mapcenter:[112.515731, 37.850592],//地图中心
			}
		},
		components: {
			// snap
		},
		watch: {
			'$store.state.monitorId': {
				deep: true,
				handler: function(newValue, oldValue) {
					//地图居中
					this.setMapCenter([newValue.lat, newValue.lon])
					//反查点位详情
					if (this.markers) {
						var index = this.markers.findIndex(obj => obj.De.extData.id == newValue.id)
						this.PointDetails(newValue, this.markers[index])
						if (this.jynPlayer0) {
							this.clearplayer(this.jynPlayer0)
						}
					}
				}
			}
		},
		created() {

		},
		mounted() {
			// this.initMap()
			if (this.pageType == 1) {
				// this.getList()
			} else {
				// 扬尘检测地图点位
				this.getData()
			}
		},
		methods: {
			//扬尘点位列表
			getData() {
				getSiteLonLatList().then(res => {
					if (res.data.code == 200) {
						this.deviceNum = res.data.data.deviceNum
						this.siteNum = res.data.data.siteNum
					}
				})
			},
			//父组件点击全屏事件
			fullScreen() {
				this.isEnlarge = !this.isEnlarge
				// if (this.isEnlarge == 0) {
				// 	// this.map.setZoom(12); //设置地图层级
				// 	this.map.setCenter([112.555441, 37.69565])
				// } else {
				// 	// this.map.setZoom(12.8); //设置地图层级
				// 	this.map.setCenter([112.565659, 37.736526])
				// }
				this.$emit('fullScreen', this.isEnlarge)
			},
			//初始化视频
			initplayer(id, token, url) {
				return new EZUIKit.EZUIKitPlayer({
					id: id, // 视频容器ID
					accessToken: token,
					url: url, //视频地址
					autoplay: true, //是否自动播放
					template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
					// footer:
					// poster:'../../assets/images/knowledge/knowledge_bj.png',
					audio: 0, //是否默认开启声音 1：打开（默认） 0：关闭

					// footer:
				});
			},
			//清除视频
			clearplayer(obj) {
				obj.stop()
				obj.hls = null;
				obj.opt.currentSource = null;
				obj.opt.sources = null;
				obj.opt = null;
				obj.video = null;
				obj.videoId = "";
			},
			//关闭监控详情
			closeClick() {
				this.closeInfoWindow()
				this.clearplayer(this.jynPlayer0)
			},
			//放大打开弹窗
			enlargeClick() {
				// this.monitorData = item
				// this.isMonitorSnap = true
				this.$store.dispatch('getPopupData', this.monitorData)
			},
		},
	}
</script>
<style lang="less" scope>
	.mapBox {
		// position: absolute;
		// top: 0;
		// left: 0;
		// bottom: 0;
		// right: 0;
		// z-index: 999;

		.Enlarge {
			width: 94px;
			height: 34px;
			background: rgba(34, 47, 68, 0.5);
			border-radius: 17px;
			position: absolute;
			top: 10px;
			right: 26%;
			z-index: 9999;
			font-size: 14px;
			font-family: Source Han Sans SC;
			font-weight: bold;
			color: #ffffff;
			

			img {
				width: 14px;
				margin-right: 10px;
			}
		}

		.Dust {
			position: absolute;
			bottom: 30px;
			right: 27%;
			z-index: 1000;
			.item{
				margin-top: 10px;
			}
			img {
				width: 12px;
				height: 16px;
				margin-right: 10px;
			}

			p {
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #FFFFFF;
				margin-right: 10px;
			}

			span {
				font-size: 20px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #F3C02B;
			}
		}

		.Jeeves {
			position: absolute;
			top: 10px;
			left: 26%;

			.item {
				margin-right: 30px;
			}

			img {
				width: 12px;
				height: 16px;
				margin-right: 10px;
			}

			p {
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #FFFFFF;
				margin-right: 10px;
			}

			span {
				font-size: 20px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #F3C02B;
			}
		}
	}

	.comMap {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.citydetails {
		width: 298px;
		height: 270px;
		// background: rgba(7, 50, 95, 0.8);
		background-image: url("../../assets/images/monitor.png");
		background-size: 100% 100%;
		// border: 1px solid #56B1D5;
		// border-radius: 12px 12px 12px 0px;
		padding: 20px 17px;
		position: relative;
		padding-left: 30px;
		padding-bottom: 25px;

		.titBox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.img {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.enlarge {
					width: 17px;
					height: 17px;
					margin-right: 10px;
				}

				.close {
					width: 20px;
					height: 20px;
				}
			}
		}

		p {
			font-size: 16px;
			font-family: Source Han Sans SC;
			font-weight: bold;
			color: #FEFFFF;
		}

		.jynPlayer0 {
			width: 100%;
			height: 90%;
			margin-top: 10px;
		}
	}

	.citydetails1 {
		width: 288px;
		min-height: 270px;
		background-image: url("../../assets/images/map.png");
		background-size: 100% 100%;
		padding: 20px 17px;
		padding-left: 40px;
		position: relative;

		.title {
			font-size: 16px;
			font-family: Source Han Sans SC;
			font-weight: bold;
			color: #FEFFFF;
		}

		.text {
			margin-top: 10px;

			p {
				font-size: 14px;
				font-family: Source Han Sans SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 24px;

				span {
					font-size: 14px;
					font-family: Source Han Sans SC;
					font-weight: bold;
					color: #9ED5FF;
					line-height: 24px;
				}
			}
		}
	}

	.citydetails2 {
		width: 288px;
		min-height: 270px;
		background: rgba(7, 50, 95, 0.8);
		border: 1px solid #56B1D5;
		padding: 20px 17px;
		position: relative;

		.title {
			display: flex;
			justify-content: space-between;

			p {
				font-size: 16px;
				font-family: Source Han Sans SC;
				font-weight: bold;
				color: #FEFFFF;
			}

			span {
				font-size: 12px;
				font-family: Source Han Sans SC;
				font-weight: bold;
				color: #F3C12B;
			}
		}

		.img {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;

			img {
				width: 48%;
				height: 70px;
			}
		}

		.text {
			margin-top: 10px;

			p {
				font-size: 14px;
				font-family: Source Han Sans SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 24px;

				span {
					font-size: 14px;
					font-family: Source Han Sans SC;
					font-weight: bold;
					color: #9ED5FF;
					line-height: 24px;
				}
			}

			span {
				font-size: 14px;
				font-family: Source Han Sans SC;
				font-weight: bold;
				color: #9ED5FF;
				line-height: 24px;
			}
		}
	}
</style>

